<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- Apple Fullscreen -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	
	<!-- Favicon -->
	<link rel="shortcut icon" href="img/favicon.ico" />
	<!-- Icone Homescreen para Apple -->
	<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
	<title>SISTEMA AGENDAMENTO</title>

	<!-- CSS -->	
	<link rel="stylesheet" href="css/bootstrap.css">										<!-- Bootstrap -->
	<link rel="stylesheet" href="css/bootstrap-responsive.css">								<!-- Bootstrap responsive -->
	<link rel="stylesheet" href="css/plugins/jquery-ui/smoothness/jquery-ui.css">			<!-- jQuery UI -->
	<link rel="stylesheet" href="css/plugins/jquery-ui/smoothness/jquery.ui.theme.css">		<!-- jQuery UI -->
	<link rel="stylesheet" href="css/plugins/gritter/jquery.gritter.css">					<!-- Notify -->
	<link rel="stylesheet" href="css/plugins/datatable/TableTools.css">						<!-- dataTables -->
	<link rel="stylesheet" href="css/plugins/chosen/chosen.css">							<!-- chosen -->
	
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/themes.css">


	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	
	<!-- Nice Scroll -->
	<script src="js/plugins/nicescroll/jquery.nicescroll.min.js"></script>
	<!-- jQuery UI -->
	<script src="js/plugins/jquery-ui/jquery.ui.core.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.widget.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.mouse.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.resizable.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.sortable.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.datepicker.min.js"></script>
	<script src="js/plugins/jquery-ui/i18n/datepicker-pt-BR.js"></script>
	<!-- slimScroll -->
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<!-- Notify -->
	<script src="js/plugins/gritter/jquery.gritter.min.js"></script>
	
	<!-- Bootstrap -->
	<script src="js/bootstrap.js"></script>
	<!-- dataTables -->
	<script src="js/plugins/datatable/jquery.dataTables.min.js"></script>
	<script src="js/plugins/datatable/jquery.dataTables.columnFilter.js"></script>
	<script src="js/plugins/datatable/jquery.dataTables.grouping.js"></script>
	
	<!-- Plugin: Validation -->
	<script src="js/plugins/validation/jquery.validate.min.js"></script>
	<script src="js/plugins/validation/additional-methods.min.js"></script>
	<!-- Chosen -->
	<script src="js/plugins/chosen/chosen.jquery.min.js"></script>
	<!-- Masked inputs -->
	<script src="js/plugins/maskedinput/jquery.maskedinput.min.js"></script>

	
	<!-- Theme scripts -->
	<script src="js/application.js"></script>

	
	<!--[if lte IE 9]>
		<script src="js/plugins/placeholder/jquery.placeholder.min.js"></script>
		<script>
			$(document).ready(function() {
				$('input, textarea').placeholder();
			});
		</script>
	<![endif]-->
	
</head>


<body class="sidebar-right" data-layout-sidebar="fixed" data-layout-topbar="fixed">
	
	<div id="navigation">
		<div class="container-fluid">
			<a href="index.html" id="brand">AGENDA</a>
			<ul class='main-nav'>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Chamados</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="#">Listar Requisições</a>
						</li>
						<li>
							<a href="#">Novo Chamado</a>
						</li>
						<li>
							<a href="#">Listar Chamados</a>
						</li>
						<li>
							<a href="#">Buscar Chamado</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Clientes</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="clients-add.html">Novo Cliente</a>
						</li>
						<li>
							<a href="clients-list.html">Listar Clientes</a>
						</li>
						<li>
							<a href="clients-search.html">Buscar Cliente</a>
						</li>
					</ul>
				</li>
				
				<li>
					<a href="#">
						<span>Agenda</span>
					</a>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Servi&ccedil;os</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="#">Novo Servi&ccedil;o</a>
						</li>
						<li>
							<a href="#">Listar Servi&ccedil;os</a>
						</li>
						<li>
							<a href="#">Buscar Servi&ccedil;o</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Produtos</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="product-add.html">Novo Produto</a>
						</li>
						<li>
							<a href="products-list.html">Listar Produtos</a>
						</li>
						<li>
							<a href="forms-validation.html">Buscar Produto</a>
						</li>
						<li>
							<a href="categorias-add.html">Nova Categoria</a>
						</li>
						<li>
							<a href="categorias-list.html">Listar Categorias</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Configura&ccedil;&otilde;es do Sistema</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="profile-list.php">Perfis de Usu&aacute;rio</a>
						</li>
						<li class='dropdown-submenu'>
							<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Usu&aacute;rios</a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">Novo Usu&aacute;rio</a>
								</li>
								<li>
									<a href="#">Listar Usu&aacute;rios</a>
								</li>
								<li>
									<a href="#">Buscar Usu&aacute;rio</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
			<div class="user">
				<div class="dropdown">
					<a href="#" class='dropdown-toggle' data-toggle="dropdown">Administrador <img src="img/application-images/icon-user.png" alt=""></a>
					<ul class="dropdown-menu pull-right">
						<li>
							<a href="#">Minha Conta</a>
						</li>
						<li>
							<a href="login.html">Sair</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid" id="content">
		<div id="left" class='no-resize'>

			<div class="subnav">
				<div class="subnav-content less">
					<div class="jq-datepicker"></div>
				</div>
			</div>
<!-- 			<div class="subnav"> -->
				
<!-- 				<div class="subnav-title"> -->
<!-- 					<a href="#" class='toggle-subnav'><i class="icon-angle-down"></i><span>Titulo</span></a> -->
<!-- 				</div> -->
<!-- 				<ul class="subnav-menu"> -->
<!-- 					<li class='dropdown'> -->
<!-- 						<a href="#" data-toggle="dropdown">Link 1</a> -->
<!-- 						<ul class="dropdown-menu"> -->
<!-- 							<li> -->
<!-- 								<a href="#">SubLink 1</a> -->
<!-- 							</li> -->
<!-- 							<li> -->
<!-- 								<a href="#">SubLink 2</a> -->
<!-- 							</li> -->
<!-- 						</ul> -->
<!-- 					</li> -->
<!-- 					<li> -->
<!-- 						<a href="#">Link 2</a> -->
<!-- 					</li> -->
<!-- 					<li> -->
<!-- 						<a href="#">Link 3</a> -->
<!-- 					</li> -->
<!-- 					<li> -->
<!-- 						<a href="#">Link 4</a> -->
<!-- 					</li> -->
<!-- 				</ul> -->
<!-- 			</div> -->
		</div>

	<div id="main">
		<div class="container-fluid">
			<div class="page-header">
				<div class="pull-left">
					<h1>Clientes</h1>
				</div>
			</div>
			<hr />
			<div class="row-fluid">
				<div class="span12">
					<div class="box">
						<div class="box-title">
							<h3>
								<i class="icon-tags"></i>
								Lista de Clientes
							</h3>
							<a href="clients-add.php" class="btn btn-primary pull-right"><i class="icon-plus"></i> Novo Cliente</a>
						</div>
						<div class="box-content nopadding">
							<table class="table table-hover table-nomargin table-bordered usertable">
								<thead>
									<tr class='thefilter'>
										<th class='hidden-350' style="width: 15%;">CPF/CNPJ</th>
										<th class='hidden-350' style="width: 30%;">Nome</th>
										<th class='hidden-350' style="width: 20%;">Status</th>
										<th class='hidden-1024'>Data de Cadastro</th>
										<th class='hidden-480'>Opções</th>
									</tr>
									<tr>
										<th class='hidden-350'>CPF/CNPJ</th>
										<th class='hidden-350' style="width: 30%;">Nome</th>
										<th class='hidden-350'>Status</th>
										<th class='hidden-1024'>Data de Cadastro</th>
										<th class='hidden-480'>Opções</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>86.452.303/0001-60</td>
										<td class='hidden-350'>Empresa testes 01</td>
										<td class='hidden-350'><span class="label label-satgreen">Ativo</span></td>
										<td class='hidden-1024'>03/07/2014</td>
										<td class='hidden-480'>
											<a href="#" class="btn" rel="tooltip" title="View"><i class="icon-search"></i></a>
											<a href="clients-edit.php" class="btn" rel="tooltip" title="Edit"><i class="icon-edit"></i></a>
											<a href="#modal-3" role="button" class="btn" rel="tooltip" title="Delete" data-toggle="modal"><i class="icon-remove"></i></a>
										</td>
									</tr>
									<tr>
										<td>85.748.411/0001-12</td>
										<td class='hidden-350'>Empresa testes 02</td>
										<td class='hidden-350'><span class="label label-satgreen">Ativo</span></td>
										<td class='hidden-1024'>14/02/2014</td>
										<td class='hidden-480'>
											<a href="#" class="btn" rel="tooltip" title="View"><i class="icon-search"></i></a>
											<a href="clients-edit.php" class="btn" rel="tooltip" title="Edit"><i class="icon-edit"></i></a>
											<a href="#modal-3" role="button" class="btn" rel="tooltip" title="Delete" data-toggle="modal"><i class="icon-remove"></i></a>
										</td>
									</tr>
									<tr>
										<td>72.915.352/0001-88</td>
										<td class='hidden-350'>Empresa testes 03</td>
										<td class='hidden-350'><span class="label label-satgreen">Ativo</span></td>
										<td class='hidden-1024'>03/07/2014</td>
										<td class='hidden-480'>
											<a href="#" class="btn" rel="tooltip" title="View"><i class="icon-search"></i></a>
											<a href="clients-edit.php" class="btn" rel="tooltip" title="Edit"><i class="icon-edit"></i></a>
											<a href="#modal-3" role="button" class="btn" rel="tooltip" title="Delete" data-toggle="modal"><i class="icon-remove"></i></a>
										</td>
									</tr>
									<tr>
										<td>45.264.362/0001-28</td>
										<td class='hidden-350'>Empresa testes 04</td>
										<td class='hidden-350'><span class="label label-satgreen">Ativo</span></td>
										<td class='hidden-1024'>03/07/2014</td>
										<td class='hidden-480'>
											<a href="#" class="btn" rel="tooltip" title="View"><i class="icon-search"></i></a>
											<a href="clients-edit.php" class="btn" rel="tooltip" title="Edit"><i class="icon-edit"></i></a>
											<a href="#modal-3" role="button" class="btn" rel="tooltip" title="Delete" data-toggle="modal"><i class="icon-remove"></i></a>
										</td>
									</tr>
									<tr>
										<td>72.671.532/0001-61</td>
										<td class='hidden-350'>Empresa testes 05</td>
										<td class='hidden-350'><span class="label label-lightred">Inativo</span></td>
										<td class='hidden-1024'>03/07/2014</td>
										<td class='hidden-480'>
											<a href="#" class="btn" rel="tooltip" title="View"><i class="icon-search"></i></a>
											<a href="clients-edit.php" class="btn" rel="tooltip" title="Edit"><i class="icon-edit"></i></a>
											<a href="#modal-3" role="button" class="btn" rel="tooltip" title="Delete" data-toggle="modal"><i class="icon-remove"></i></a>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="modal-3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">Confirmar exclusão</h3>
		</div>
		<div class="modal-body">
			<p>Deseja excluir a categoria?</p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Não</button>
			<button class="btn btn-primary" data-dismiss="modal">Sim</button>
		</div>
	</div>

	
<script type="text/javascript">

	$(document).ready(function(){

		if($(".usertable").length > 0){
			var opt = {
				"sPaginationType": "full_numbers",
				"oLanguage":{
					"sSearch": "<span>Pesquisar:</span> ",
					"sInfo": "Mostrando <span>_START_</span> até <span>_END_</span> de <span>_TOTAL_</span> registros",
					"sLengthMenu": "_MENU_ <span>registros por página</span>"
				},
				'sDom': "lfrtip",
				'aoColumnDefs' : [
				{ 'bSortable': false, 'aTargets': [4] }
				],
				'oColVis': {
					"buttonText": "Change columns <i class='icon-angle-down'></i>"
				},
				'oTableTools' : {
					"sSwfPath": "js/plugins/datatable/swf/copy_csv_xls_pdf.swf"
				}
			};
			var oTable = $('.usertable').dataTable(opt);

			$('.dataTables_filter input').attr("placeholder", "Pesquisar...");
			$(".dataTables_length select").wrap("<div class='input-mini'></div>").chosen({
				disable_search_threshold: 9999999
			});
//			$("#check_all").click(function(e){
//				$('input', oTable.fnGetNodes()).prop('checked',this.checked);
//			});
			$.datepicker.setDefaults( {
				dateFormat: "dd/mm/yy"
			});
			oTable.columnFilter({
				"sPlaceHolder" : "head:after",
				'sRangeFormat': "{from}{to}",
				'aoColumns': [
				{
					type: "text",
				},
				{
					type: "text",
				},
				{
					type: "select",
					bCaseSensitive:true,
					values: ['Ativo', 'Inativo']
				},
				{
					type: "date-range"
				},
				null,
				]
			});
			$(".usertable").css("width", '100%');
		}
	});
	
</script>


	</div>
</body>

</html>

